/* typehints:start */
import { Npc } from "../../npcs/npc";
import { People } from "../../people";
import { DialogueGroup } from "../../npcs/dialogue";
/* typehints:end */

import { getObjectType, makeDiv } from "../../../core/utils/utils";
import { BaseHUDPart } from "../base_hud_part";
import { DynamicDom } from "../dynamic_dom";
import { SelectBtnGroup } from "../select_btn_group";
import { getPresitgeTitle } from "../../defines/presitge_define";

export class HUDNpcBoard extends BaseHUDPart{
  constructor(root){
    super(root);
  }

  createElements(parent){
    this.element = makeDiv(
			parent,
			"npc_board",
			["remove", 'alert_board'],
			`
      <div class="screen"></div>
      <div class="close-btn"><img src="res/ui/icons/close.svg" /></div>
      <div class="content">
        <div class="btn-group"></div>

        <div class="wrapper">
          <h3 class="name"></h3>

          <div class="page attr-page"></div>
          <div class="page control-page"></div>
          <div class="page reputation-page"></div>
        </div>
      </div>
    `
		);
  }
  
  initialize(){
    this.domAttach = new DynamicDom(this.root, this.element);
    this.npc = null;

    this.selectBtns = new SelectBtnGroup(this.root, this.element.querySelector('.content'), '.btn-group', [
      {
        text: '属性',
        page: '.wrapper|attr-page',
        active: true,
      },
      {
        text: '名望',
        page: '.wrapper|reputation-page',
      },
      {
        text: '操作',
        page: '.wrapper|control-page',
      }
    ]);

    this.bindCloseBtn();
  }

  drawNpcPanel(){
    this.drawAttrPage();
    this.drawControlPage();
    this.drawReputationPage();
  }

  bindCloseBtn(){
    let screen = this.element.querySelector('.screen');

    this.trackClicks(screen, this.hanldeHideNpcBoard.bind(this), {
      applyCssClass: ''
    });
  }

  hanldeHideNpcBoard(){
    this.domAttach.internalDetach(true);
  }

  handleShowNpcBoard(npc){
    this.npc = npc;
    this.element.querySelector('.name').innerText = npc.getName();
    
    this.drawNpcPanel();
    this.domAttach.internalAttach();
    this.selectBtns.setActive();
  }

  /**
   * 
   * @param {Npc} npc 
   */
  drawControlPage(){
    let controlPage = this.element.querySelector(".control-page");
    controlPage.innerHTML = '';
    
    let controls = this.npc.internalGetControl();

    controls.map(item => {
      let btn = makeDiv(
				controlPage,
				null,
				["styledButton"],
				`
        ${item.text}      
      `
			);

      const controlFn = () => {
        this.hanldeHideNpcBoard();

        item.fn.call(this.npc);
      }

      this.trackClicks(btn, () => {
        if(item.confirm){
          let { ok } = this.root.gameState.dialogs.showInfo('确认操作', `你是否对<${this.npc.getName()}>进行<${item.text}>操作`,
            ['cancel:bad:取消', 'ok:success:确认']
          );

          ok.add(() => {
            controlFn();
          })
        } else {
          controlFn();
        }
      });
    })
  }

  /**
   * 
   * @param {Npc} npc 
   */
  drawAttrPage(){
    let attrPage = this.element.querySelector('.attr-page');

    /** @type {People} */
    let people = this.npc.people;

    attrPage.innerHTML = `
      <p class="info">种族: <span>${people.getRace().text}</span></p>
      <p class="info">性别: <span>${people.getGender()}</span></p>
      <p class="info">年龄: <span>${people.data.useAttr.age}/${people.data.attr.ageMax}</span></p>
      <p class="info">修真: <span>${people.getLevelDesc('xian')}</span></p>
      <p class="info">炼体: <span>${people.getLevelDesc('force')}</span></p>
      <p class="info">气血: <span>${people.data.attr.blood}</span></p>
      <p class="info">敏捷: <span>${people.data.attr.agile}</span></p>
      <p class="info">神识: <span>${people.data.attr.cons}</span></p>
      <p class="info">灵力: <span>${people.data.attr.spirit}</span></p>
      <p class="info">天资: <span>${people.getDiffDesc()}</span></p>
    `;
  }

  drawReputationPage(){
    let parent = this.element.querySelector('.reputation-page');

    /** @type {People} */
    let people = this.npc.people;

    let presitgeText = ``;

    Object.keys(people.data.presitge).map(pos => {
      let world = this.root.worldMap.getMapClip(pos);
      let presitge = people.data.presitge[pos]

      if(world){
        presitgeText += `
          <span class="tag dark">${world.title}(${getPresitgeTitle(presitge)})</span>
        `
      }
    })

    parent.innerHTML = `
      <p class="info">好感: <span>${getPresitgeTitle(people.data.favor)}</span></p>
      <p class="info">声望: ${presitgeText}</p>
    `;
  }
}